<!-- 业务操作 -->
<template>
  <div class="whiteTab">
    <mt-navbar v-model="selected" class="tabDiv">
      <mt-tab-item id="1">待执行</mt-tab-item>
      <mt-tab-item id="2">执行中</mt-tab-item>
      <mt-tab-item id="3">已完成</mt-tab-item>
    </mt-navbar>

    <mt-tab-container v-model="selected" style="background: #eeeeee">
      <!-- 待执行 -->
      <mt-tab-container-item id="1">
        <mt-loadmore :top-method="loadTopUnfinshed" :bottom-method="loadBottomUnfinshed" :bottom-all-loaded="unfinshData.allLoaded"  :autoFill='false'
          ref="loadmoreUnfinshed">
          <ul>
            <li v-for='(item,index) in unfinshData.data' >
              <div v-if='item != nothingMessage' class="orderList">
                <div class="orderTop unfinshTop">
                  <p class="orderNum">{{item.dispatch_no}}</p>
                  <p>
                    <span style="font-weight:bold">{{item.customer_name}}</span>
                    <span style="padding-left:2.625rem">{{item.require_time_to}}</span>
                  </p>
                  <p>{{item.shipper_city}}-{{item.consignee_city}}
                    <span style="padding-left:2.625rem">计划量：
                      <span style="color:red">{{item.plan_amount}}T</span>
                    </span>
                  </p>
                </div>
                <div class="orderCenter" style="justify-content:normal">
                  <img style=" height: 0.8435rem;margin-right:0.375rem;" src="../../../static/images/home/shipper.png">
                  <div>
                    <p>
                      <span style="padding-right:.2rem">{{item.shipper_city}}</span>
                      <span style="padding-right:.3rem">{{item.shipper_county}}</span>
                      <span>{{item.shipper_address}}</span>
                    </p>
                    <p style="color:#9E9E9E">
                      要求
                      <span style="padding:0.2rem;font-size:.4rem;color:#000">{{item.require_time_from}}</span>
                      抵达
                    </p>
                  </div>
                </div>
                <div class="orderBottom" style="justify-content:space-between">
                  <div style="display:flex;flex-direction:column">
                    <div class="unfinshBottom" style="display:flex;display:-webkit-flex">
                      <img style=" height: 0.625rem;margin-right:0.375rem;" src="../../../static/images/home/remark.png">
                      <div>
                        <div>
                          <p v-if='item.is_clean_pot == 1'>装货前需要清罐
                            <!-- <span v-if='item.is_clean_pot == 0' style="font-size:.4rem;color:rgb(255, 165, 0);padding-left: .3rem;">待清灌</span> -->
                            <span class="strong">待清灌</span>
                          </p>
                          <p v-if="item.time_diff" class="remark2">已下达
                            <span style="color:red">{{item.time_diff}}</span>小时，请尽快执行
                          </p>
                          <P v-if="item.remark" style="padding-top:.1rem">
                            {{item.remark}}     
                          </P>
                        </div>
                      </div>
                    </div>

                    <!-- 已完成的也要这个并且要挪到外面去 -->
                    <div v-if="item.line_request" style="display:flex;align-items: center;padding:0 0 .1rem 0">
                      <img style=" height: 0.625rem;margin-right:0.375rem;" src="../../../static/images/home/route.png">{{item.line_request}}
                    </div>
                  </div>
                  <mt-button @click.stop='sureGo(item.id,item.company_id,item.dispatch_no,item.depart_time,item.depart_remark)' type="primary"
                    style="width: 1.4rem; height: 1.4rem;font-size:.4rem;padding:0.1rem;">
                    <div>发车</div>
                    <div>确认</div></mt-button>
                </div>

              </div>
              <div v-else class="noMessage" >
                <span>-------{{nothingMessage}}---------</span>
              </div>

            </li>
          </ul>
        </mt-loadmore>
      </mt-tab-container-item>
      <!-- 执行中 -->
      <mt-tab-container-item id="2">
        <mt-loadmore :top-method="loadTopDoing" :bottom-method="loadBottomDoing" :bottom-all-loaded="doingData.allLoaded" :autoFill='false'  ref="loadmoreDoing">
          <ul>
            <li v-for='(item,index) in doingData.data' >

              <div v-if='item != nothingMessage' class="orderList"  @click='toNine(item.dispatch_no,item.company_id)'>
                <div class="orderTop">
                  <p>
                    <span style="padding-right:.75rem" class="orderNum">{{item.dispatch_no}}</span>
                    <span v-if='item.dispatch_status ==20'>已审核</span>
                    <span v-else-if='item.dispatch_status ==30'>已发车</span>
                    <span v-else-if='item.dispatch_status ==35'>已到厂</span>
                    <span v-else-if='item.dispatch_status ==40'>已装货</span>
                    <span v-else-if='item.dispatch_status ==45'>已抵达</span>
                    <span v-else-if='item.dispatch_status ==50'>已卸货</span>
                    <span v-else-if='item.dispatch_status ==60'>完成</span>
                  </p>
                  <p class="orderAddress">
                    <span style="font-weight:bold">{{item.customer_name}}</span>
                    <span >{{item.require_time_to}}</span>
                    <span class="textRight">{{item.shipper_city}}-{{item.consignee_city}}</span>
                  </p>
                  <p class="TopBottom">
                    <span>计划量：
                      <span>{{item.plan_amount}}</span>T
                    </span>
                    <span>装货量：
                      <span>{{item.load_amount}}</span>T
                    </span>
                    <span>卸货量：
                      <span>{{item.unload_amount}}</span>T
                    </span>
                  </p>
                </div>
                <div class="orderCenter">
                  <img style=" height: 0.8435rem;margin-right:0.375rem;" src="../../../static/images/home/shipper.png">
                  <div style="flex-grow:1">
                    <p>
                      <span style="padding-right:.2rem">{{item.shipper_city}}</span>
                      <span style="padding-right:.3rem">{{item.shipper_county}}</span>
                      <span>{{item.shipper_address}}</span>
                    </p>
                    <p style="color:#9E9E9E">
                      要求
                      <span style="padding:0.2rem;font-size:.4rem;color:#000">{{item.require_time_from}}</span>
                      抵达
                    </p>
                  </div>
                  <span class="telPhone" @click.stop='sendTel(item.shipper_contact_mobile)'>
                    <img src="../../../static/images/home/tel2x.png">
                  </span>
                </div>
                <div class="orderCenter" v-if='item.is_seal'>
                  <img style=" height: 0.8435rem;margin-right:0.375rem;" src="../../../static/images/home/consignee.png">
                  <div style="flex-grow:1">
                    <p>
                      <span style="padding-right:.2rem">{{item.consignee_city}}</span>
                      <span style="padding-right:.3rem">{{item.consignee_county}}</span>
                      <span>{{item.consignee_address}}</span>
                    </p>
                    <p style="color:#9E9E9E">
                      要求
                      <span style="padding:0.2rem;font-size:.4rem;color:#000">{{item.require_time_to}}</span>
                      送达
                    </p>
                  </div>
                  <span class="telPhone" @click.stop='receive(item.consignee_contact_mobile)'>
                    <img src="../../../static/images/home/tel2x.png">
                  </span>
                </div>
                <div class="orderBottom" style="padding:.1rem 0 0 0" v-if="item.is_clean_pot == 1 ||(item.receivables_way== 10 && item.receivable_cost>0) || item.remark">
                  <img style=" height: 0.625rem;margin-right:0.375rem;" src="../../../static/images/home/remark.png">
                  <div style="width:7.53125rem">
                    <div>
                      <p v-if='item.is_clean_pot == 1'>装货前需要清罐
                        <!-- <span v-if='item.is_clean_pot == 0' style="font-size:.4rem;color:rgb(255, 165, 0);padding-left: .3rem;">待清灌</span> -->
                        <span v-if=' item.is_already_clean_pot ==1' class="strong">已清灌</span>
                        <span v-else-if='item.is_already_clean_pot !=1' class="strong">待清灌</span>
                      </p>
                      <p v-if='item.receivables_way== 10 && item.receivable_cost>0'>
                        <span v-if="item.charge_node == 'load'">运费根据装货磅重计算</span>
                        <span v-if="item.charge_node == 'unload'">运费根据卸货磅重计算</span>
                        <span class="strong">{{item.receivable_cost}}元</span>
                      </p>
                      <p v-if="item.remark" style="padding-top:.1rem">
                          {{item.remark}}     
                      </p>
                    </div>
                  </div>
                </div>
                <!-- 备注和路线 -->
                <div v-if="item.line_request" style="display:flex;align-items: center;padding:0 0 .1rem 0">
                  <img style=" height: 0.625rem;margin-right:0.375rem;" src="../../../static/images/home/route.png">{{item.line_request}}
                </div>
              </div>
              <div v-else class="noMessage">
                <span>-------{{nothingMessage}}---------</span>
              </div>
            </li>
          </ul>
        </mt-loadmore>
      </mt-tab-container-item>
      <!-- 已完成 -->
      <mt-tab-container-item id="3">
        <div class="doingSelect">
          <div class="selecondition">
            <span class="dateLable">运输日期</span>
            <div class="dateRange">
              <span style="padding-right: 0.625rem;" @click='openFromPicker'>{{dateFrom}}</span>到
              <span style="padding-left: 0.625rem;" @click='openToPicker'>{{dateTo}}</span>
            </div>
          </div>
          <div style="padding: 0.34375rem 0;">
            <mt-button @click='searchHistory' type="primary" style="width:2.15rem;height:1rem">查询</mt-button>
            <mt-button @click='resetDoing' type="primary" style="width:2.15rem;height:1rem">重置</mt-button>
          </div>
        </div>

        <mt-loadmore :top-method="loadTopFinshed" :bottom-method="loadBottomFinshed" :bottom-all-loaded="finshedData.allLoaded"  :autoFill='false' ref="loadmoreFinshed">
          <ul>
            <li v-for='(item,index) in finshedData.data'>
              <div v-if='item != nothingMessage' class="orderList" @click='toNine(item.dispatch_no,item.company_id)'>
                <div class="orderTop">
                  <p class="orderNum">
                    <span style="padding-right:.75rem">{{item.dispatch_no}}</span>
                  </p>
                  <p class="orderAddress">
                    <span style="font-weight:bold">{{item.customer_name}}</span>
                    <span>{{item.require_time_to}}</span>
                    <span class="textRight">{{item.shipper_city}}-{{item.consignee_city}}</span>
                  </p>
                  <p class="TopBottom">
                    <span>装货量:
                      <span>{{item.load_amount}}</span>T
                    </span>
                    <span>卸货量：
                      <span>{{item.unload_amount}}</span>T
                    </span>
                    <span>磅差：
                      <span style="color:red">{{item.difference_amount}}T</span>
                    </span>

                  </p>
                </div>
                <div class="orderCenter">
                  <img style=" height: 0.8435rem;margin-right:0.375rem;" src="../../../static/images/home/shipper.png">
                  <div style="flex-grow:1">
                    <p>
                      <span style="padding-right:.2rem">{{item.shipper_city}}</span>
                      <span style="padding-right:.3rem">{{item.shipper_county}}</span>
                      <span>{{item.shipper_address}}</span>
                    </p>
                    <p style="color:#9E9E9E">
                      要求
                      <span style="padding:0.2rem;font-size:.4rem;color:#000">{{item.require_time_from}}</span>
                      抵达
                    </p>
                  </div>
                </div>
                <div class="orderCenter" style="border-bottom:none">
                  <img style=" height: 0.8435rem;margin-right:0.375rem;" src="../../../static/images/home/consignee.png">
                  <div style="flex-grow:1">
                    <p>
                      <span style="padding-right:.2rem">{{item.consignee_city}}</span>
                      <span style="padding-right:.3rem">{{item.consignee_county}}</span>
                      <span>{{item.consignee_address}}</span>
                    </p>
                    <p style="color:#9E9E9E">
                      要求
                      <span style="padding:0.2rem;font-size:.4rem;color:#000">{{item.require_time_to}}</span>
                      送达
                    </p>
                  </div>

                </div>
              </div>
              <div v-else class="noMessage">
                <span>-------{{nothingMessage}}---------</span>
              </div>
            </li>
          </ul>
        </mt-loadmore>

      </mt-tab-container-item>
    </mt-tab-container>

    <!-- 所有弹窗 -->
    <!-- 起始日期选择器 -->
    <mt-datetime-picker v-model='dateFromDate' ref="fromDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" @confirm="dateFrom=dateFromDate.Format('yyyy-MM-dd'); " :endDate='new Date()'>
    </mt-datetime-picker>
    <!-- 结束日期选择器 -->
    <mt-datetime-picker v-model='dateToDate' ref="toDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" @confirm="dateTo=dateToDate.Format('yyyy-MM-dd');" :endDate='new Date()'>
    </mt-datetime-picker>

    <div v-if="isNeedBackTop" class='backToTop' @click='bacToTop'>
      <a>返回顶部</a>
    </div>
  </div>
</template>
<script>
  import {
    MessageBox
  } from 'mint-ui';

  import {
    InfiniteScroll
  } from 'mint-ui';

  export default {
    components: {
      InfiniteScroll
    },
    data() {
      return {
        selected: '', //默认选中模块
        unfinshData: { //待执行数据参数
          pageSize: 10,
          pageNo: 1,
          timeFrom: '',
          timeTo: '',
          data: [],
          allLoaded: false, //用来判断数据是否加载完毕,为true的时候,上拉将不再加载数据
        },
        doingData: { //执行中数据参数
          pageSize: 10,
          pageNo: 1,
          data: [],
          allLoaded: false, //用来判断数据是否加载完毕,为true的时候,上拉将不再加载数据
        },
        finshedData: { //已完成数据参数
          pageSize: 10,
          pageNo: 1,
          data: [],
          allLoaded: false, //用来判断数据是否加载完毕,为true的时候,上拉将不再加载数据
        },
        user: {}, //用户登陆保存的参数
        now: new Date(), //当前时间
        dateTo: '', //查询结束日期
        dateToDate: '', //查询结束日期选择器绑定值
        dateFromDate: '', //查询结束日期选择器绑定值
        dateFrom: '', //查询起始日期
        isNeedBackTop: false, //显示顶部
        nothingMessage: '没有更多数据了', //无数据时提示
      }
    },
    mounted() {
      this.initSelected();  
      this.resetDoing();
      // this.doing(false,true);
      // this.finshed(false,true);
      this.user = JSON.parse(sessionStorage.getItem('loginData'));
      this.watchScroll();
    },
    methods: {
      //待执行数据刷新
      unfinished(type,ref) {  //第一个参数true为加载数据，false则为刷新数据,第二个参数为第一次主动刷新时不需要关闭控件方法
        let that = this,
          parms = {
            page_size: this.unfinshData.pageSize,
            page_no: this.unfinshData.pageNo,
            driver_code:this.user.driver_code,
            company_id:this.user. company_id
            // create_time_from:this.unfinshData.timeFrom,
            // create_time_to:this.unfinshData.timeTo
          };
        if(!this.user.driver_code) return;//防止loadmore插件出现加载触发
        this.$api.post('/wechat/pendingDispatchOrder', parms, function (data) {
          if (type) { 
              data.obj.list.forEach(element => {
                that.unfinshData.data.push(element);
              });          
            that.$refs.loadmoreUnfinshed.onBottomLoaded();
          } else {
          if(ref)  that.$refs.loadmoreUnfinshed.onTopLoaded();
            that.unfinshData.data = data.obj.list;
          }

          if (data.obj.list.length == 0 && that.unfinshData.data.indexOf(that.nothingMessage) == -1) {
              //如果请求数据为空了 并且没有添加不存在提示  就添加不存在提示
              that.unfinshData.data.push(that.nothingMessage);
              that.unfinshData.allLoaded = true;
            } 
        }, function (error) {
          MessageBox('提示', error.msg);
        })
      },
      //执行中数据刷新
      doing(type,ref) {
        let that = this,
          parms = {
            page_size: this.doingData.pageSize,
            page_no: this.doingData.pageNo,
            driver_code:this.user.driver_code,
            company_id:this.user. company_id
            // create_time_from:this.doingData.timeFrom,
            // create_time_to:this.doingData.timeTo
          };
          if(!this.user.driver_code) return;//防止loadmore插件出现加载触发
        this.$api.post('/wechat/executingDispatchOrder', parms, function (data) {
          if (type) {
              data.obj.list.forEach(element => {
                that.doingData.data.push(element);
              });          
            that.$refs.loadmoreDoing.onBottomLoaded();
          } else {
            that.doingData.data = data.obj.list;
            if(ref)   that.$refs.loadmoreDoing.onTopLoaded()
          }

          if (data.obj.list.length == 0 && that.doingData.data.indexOf(that.nothingMessage) == -1) {
              //如果请求数据为空了 并且没有添加不存在提示  就添加不存在提示
              that.doingData.data.push(that.nothingMessage);
              that.doingData.allLoaded = true;
            }


        }, function (error) {
          MessageBox('提示', error.msg);
        })
      },
      //已完成数据刷新
      finshed(type,ref) {
        let that = this,
          parms = {
            page_size: this.finshedData.pageSize,
            page_no: this.finshedData.pageNo,
            create_time_from: this.dateFrom,
            create_time_to: this.dateTo,
            driver_code:this.user.driver_code,
            company_id:this.user. company_id
          };
          if(!this.user.driver_code) return;//防止loadmore插件出现加载触发
        this.$api.post('/wechat/historyDispatchOrder', parms, function (data) {
          // that.finshedData.data = data.obj.list;
          // console.log(data)
          if (type) {    
              data.obj.list.forEach(element => {
                that.finshedData.data.push(element);
              });      
            that.$refs.loadmoreFinshed.onBottomLoaded();
          } else {
            that.finshedData.data = data.obj.list;
            if(ref)   that.$refs.loadmoreFinshed.onTopLoaded()
          }

          if (data.obj.list.length == 0 && that.finshedData.data.indexOf(that.nothingMessage) == -1) {
              //如果请求数据为空了 并且没有添加不存在提示  就添加不存在提示
              that.finshedData.data.push(that.nothingMessage);
              that.finshedData.allLoaded = true;
            } 


        }, function (error) {
          MessageBox('提示', error.msg);
        })
      },
      //确认发车
      sureGo(id, company_id, dispatch_no, depart_time, depart_remark) {

        let that = this,
          parms = {
            id: id,
            company_id: company_id,
            dispatch_no: dispatch_no,
            depart_time: new Date().Format('yyyy-MM-dd hh:mm:ss'),
            depart_remark: depart_remark,
            operator: this.user.user_uuid
          };
        this.$api.post('/dispatch/csDispatchOrder/departConfirmHandler', parms, function (data) {
          MessageBox('提示', '操作成功').then(() => { //请求成功跳转执行中页面并且刷新数据
            that.selected = '2',
              that.doingData.pageNo = 1;
            that.doing();
            that.unfinshData.pageNo = 1;
            that.unfinished();
            that.bacToTop();
          })
        }, function (error) {
          MessageBox('提示', error.msg);
        })
      },
      // 发货联系人  点击可拨打
      sendTel(number) {
        let that = this;
        MessageBox({
          title: '发货联系方式',
          message: number,
          confirmButtonText: '拨打',
          showConfirmButton: true,
          showCancelButton: true,
          confirmButtonHighlight: true
        }).then(function (type) {
          switch (type) {
            case 'confirm':
              that.$api.tell(number);
              break;
            case 'cancel ':
              break;
          }
        })
      },
      // 收获联系人  点击可拨打
      receive(number) {
        let that = this;
        MessageBox({
          title: '收货联系方式',
          message: number,
          confirmButtonText: '拨打',
          showConfirmButton: true,
          showCancelButton: true,
          confirmButtonHighlight: true
        }).then(function (type) {
          switch (type) {
            case 'confirm':
              that.$api.tell(number);
              break;
            case 'cancel ':
              break;
          }
        });

      },
      //重置日期
      resetDoing() {
        let dateTo = new Date();
        this.dateTo = dateTo.Format("yyyy-MM-dd");
        this.dateToDate = dateTo;

        let dateFrom = new Date();
        this.dateFrom = new Date(dateFrom.setMonth(dateFrom.getMonth() - 1)).Format("yyyy-MM-dd");
        this.dateFromDate = new Date(dateFrom);

      },
      openFromPicker() {
        this.$refs.fromDatepicker.open();
      },
      openToPicker() {
        this.$refs.toDatepicker.open();
      },
      //查询已完成数据
      searchHistory() {
        this.finshed();
      },
      //跳转九宫格页面
      toNine(no, id) {
        let nine = {
          dispatch_no: no,
          company_id: id
        }
        sessionStorage.setItem('nine', JSON.stringify(nine));
        sessionStorage.setItem('operaSelected', this.selected);
        this.$router.push({
          'path': '/detail'
        })
      },
      watchScroll() { //监听滚动
        let that = this;
        window.onscroll = function () {
          let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
          if (scrollTop > clientHeight) {
            that.isNeedBackTop = true;
          } else {
            that.isNeedBackTop = false;
          }
        }
      },
      bacToTop() { //返回顶部
        this.$api.BackTop();
      },
      loadTopUnfinshed() { // 待执行--下拉刷新
        this.unfinshData.pageNo = 1;
        this.unfinished(false,true);
      },
      loadBottomUnfinshed() { //待执行--上拉加载
        this.unfinshData.pageNo += 1;
        this.unfinished(true);
      },
      loadTopDoing() { //执行中--下拉刷新
        this.doingData.pageNo = 1;
        this.doing(false,true);
      },
      loadBottomDoing() { //执行中--上拉加载
        this.doingData.pageNo += 1;
        this.doing(true);
      },
      loadTopFinshed() { //已完成--下拉刷新
        this.finshedData.pageNo = 1;
        this.finshed(false,true);
      },
      loadBottomFinshed() { //已完成--上拉加载
        this.finshedData.pageNo += 1;
        this.finshed(true);
      },
      initSelected(){ 
        this.selected = sessionStorage.getItem('operaSelected') || '2';
        switch(this.selected){
          case '1':
          
          this.unfinished(false,false);
             break;
          case '2':this.doing(false,false);
             break;
          case '3':this.finshed(false,false);
             break;
        }
        }
    },
    watch: {
      selected(){  //tab切换刷新
        switch(this.selected){
          case '1':
          this.unfinshData.pageNo = 1;
          this.unfinished(false,false);
             break;
          case '2':
          this.doingData.pageNo = 1;
          this.doing(false,false);
             break;
          case '3':
          this.finshedData.pageNo = 1;
          this.finshed(false,false);
             break;
        }
      }
    }
  }

</script>
<style scoped>
  .tabDiv {
    background: #3B8CE7;
    color: #fff
  }

  .orderTop {
    border-bottom: 1px solid #ccc;
  }

  .unfinshTop p {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    padding-right: 2.4rem
  }

  .TopBottom {
    color: #808080;
    /* padding-right: 0.875rem; */
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }

  .orderNum {
    font-weight: bold;
    font-size: .4rem;
    text-align: left;
  }
  .orderAddress{
    display: flex;
    justify-content: space-between
  }
  .orderAddress span{
  width: 3rem;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.textRight{
  text-align: right;
}
  .orderCenter {
    display: flex;
    padding: 0.2rem 0;
    border-bottom: 1px solid #ccc
  }

  .orderBottom {
    display: flex;
    padding: 0.2rem 0;
  }
  .orderBottom  p{
    margin: 0 0 .1rem 0;
  }
  .orderBottom  .remark2{
    padding-top: .1rem
  }
  p {
    margin: 0 0 .2rem 0;
  }

  .orderList {
    text-align: left;
    padding: 0.2rem 0.3125rem 0 0.3125rem;
    margin-bottom: .2rem;
    background: #fff;
    box-sizing: border-box
  }
.noMessage{
  padding: 0.2rem 0.3125rem 0 0.3125rem;
  background: #fff;
  box-sizing: border-box;
  text-align: center; color: #eee;color: #80808f;padding-bottom: .4rem;margin-bottom:0
}
  .strong {
    font-size: .4rem;
    color: rgb(255, 165, 0);
    padding-left: .3rem;
  }

  .doingSelect {
    background: #fff
  }

  .selecondition {
    display: flex;
    /* justify-content: space-between; */
    padding-left: 0.40625rem;
    padding-right: 0.625rem;
    height: 1.21875rem;
    align-items: center;
  }

  .dateLable {
    color: #9E9E9E;
  }

  .dateRange {
    margin-left: 0.6rem;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  .dateRange span{
  font-size: .4rem;
  font-weight: bold
}
</style>
<style>
  .whiteTab .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 2px solid #fff;
    color: #fff;
    font-weight: bold;
    margin-bottom: -3px;
    margin-bottom: .1rem;
  }

  .backToTop {
    position: fixed;
    right: 10px;
    bottom: 40px;
    z-index: 1;
    background: #3B8CE7;
    border: 1px solid #ccc;
    border-radius: 40px;
    font-size: 13px;
    padding: 10px;
    color: hsla(0, 0%, 100%, .95);
    box-shadow: 2px 2px #ddd;
  }

</style>
